<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端css</title>
    <style>
      body {
        font-size: 0;
        margin: 0;
      }
      body>* {
        font-size: 16px;
      }
      p {
        font-size: 40px;
        font-family: 'Courier New', Courier, monospace;
        font-style: normal;
        font-weight: normal;
        color: red;
        /* 字母间距 */
        letter-spacing: normal;
        /* 单词间距 */
        word-spacing: normal;
        /* 文本修饰 */
        text-decoration: underline;
        /* 文本缩进 */
        text-indent: 40px;
        /* 水平对齐 */
        text-align: center;
        /* 行高:最终取决于一行的最高元素高度 */
        line-height: 1.5;
        /* 行内元素垂直对齐 */
        vertical-align: middle;
        /* text-transform: capitalize; */
        word-wrap: break-word;
        word-break: keep-all;
      }
      ul,
      ol {
        /* 列表符号 */
        list-style-type: none;
        /* 列表符号位置 */
        list-style-position: outside;
        /* 自定义列表符号 */
        list-style-image: url();
      }
      table {
        /* 列宽 */
        table-layout: auto;
        /* 单元格间距 */
        border-spacing: 10px;
        /* 合并边框 */
        border-collapse: separate;
        /* 隐藏空单元格 */
        empty-cells: hide;
        /* 标题位置 */
        caption-side: top;
      }
      div {
        /* 背景色 */
        background-color: red;
        /* 背景图 */
        background-image: url();
        /* 背景重复方式 */
        background-repeat: no-repeat;
        /* 背景位置 */
        background-position: center center;
        background-clip: content-box;
        /* 边框颜色 */
        border-color: blue;
        /* 边框样式 */
        border-style: dashed;
        /* 边框宽度 */
        border-width: 5px;
        /* 边框圆角 */
        border-radius: 5px; 
        /* 鼠标样式 */
        cursor: pointer;

        outline-style:dashed ;
        outline-width: 5px;
        
        box-shadow: 10px 10px #888888;
        box-sizing: border-box;
        resize: both;
        opacity: 0.7;
      }
      #div1 {
        margin-bottom: 20px;
      }
      #div2 {
        margin-top: 20px;
        margin-right: 20px;
        display: inline-block;
      }
      #div3 {
        margin-left: 20px;
        display: inline-block;
      }
      #div5 {
        margin: 30px;
        position: absolute;
        left: 30px;
      }
      #div6 {
        position: relative;
        /* left: 200px; */
        display: inline-block;
      }
      #div7 {
        position: fixed;
        right: 0px;
        top: 0px;
      }
      #div8 {
        display: inline-block;
      }
      #div9 {
        display: inline-block;
        position: sticky;
        top: 100px;
        left: 10px;
      }
      #div10 {
        display: inline-block;
      }
      #div11 {
        display: inline-block;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <p>
      this is css test this is css test this is css test this is css test this is css test this is css test this is css test this is css test this is css test this is css test
    </p>

    <ul>
      <li>this is unordered list</li>
      <li>this is unordered list</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
      <li>this is ordered list</li>
      <li>this is ordered list</li>
    </ol>

    <table border="1">
      <!-- 表格标题 -->
      <caption>
        this is caption
      </caption>
      <tr>
        <!-- 表头 -->
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
      </tr>
      <tr>
        <td>(1,1)</td>
        <td>(1,2)</td>
        <td>(1,3)</td>
      </tr>
      <tr>
        <td>(2,1)</td>
        <td>(2,2)</td>
        <td>(2,3)</td>
      </tr>
    </table>

    <div id="div1" style="height: 100px; width:100px">this is div1</div>
    <div id="div2" style="height: 100px; width:100px">this is div2</div>
    <div id="div3" style="height: 100px; width:100px">this is div3</div>

    <div id="div4" style="height: 300px; width:300px">
     <div id="div5" style="height: 100px; width:100px">this is div5</div>
     <div id="div8" style="height: 100px; width:100px">this is div8</div>
    </div>
   

    <div id="div6" style="height: 100px; width:100px">this is div6xx</div>
    <div id="div7" style="height: 100px; width:100px">this is div7</div>

    
    
    <div id="div11" style="height: 300px; width:300px">
      <div id="div9" style="height: 100px; width:100px">this is div9</div>
    </div>


    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    <div id="div10" style="height: 100px; width:100px">this is div10</div>
    


  </body>
</html>
